<template>
    <fieldset>
        <legend>购物车</legend>
        <h2>{{tag}}</h2>
        <ul>
            <li v-for="item in carts" :key='item.id'>
                <span>产品名称：</span>
                <b>{{item.title}}</b>
                ===
                <span>产品单价：</span>
                <b>{{item.price}}</b>
                ===
                <span>数量：</span>
                <b>{{item.count}}</b>
            </li>
        </ul>
        <h1 :style="{textAlign:'right'}">总价格：
            <span :style="{color:'red'}">{{total}}</span>
        </h1>
    </fieldset>
</template>
<script>
    import { mapState,mapGetters } from "vuex";
    export default {
        computed: {
            ...mapState('Cart',['tag','carts']),
            ...mapGetters('Cart',['total'])
        }
    }
</script>